<template>
    <div class="index">        
        <Row  class="title" type="flex"  justify="center" align="top">
            <h1>虚拟小键盘</h1>
        </Row>
        <Row class="control" type="flex"  justify="center" align="top">
             <Col :span="5"/>
            <Col :span="6">
                <span class="switch_label">声音 </span>
                <i-switch size="large" v-model="sound_switch"> 
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                </i-switch>
            </Col>
            <Col :span="6">
                <span class="switch_label">震动 </span>
                <i-switch size="large" v-model="vibrate_switch"> 
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                </i-switch>
            </Col>
             <Col :span="5"/>
        </Row>
        <Row  type="flex"  justify="center" align="top">
            <Col>
                <Row>
                    <Button type="primary"  @click="handleStart('backspace')"><-</Button>        
                    <Button type="primary"  @click="handleStart('/')">/ </Button>        
                    <Button type="primary"  @click="handleStart('*')">* </Button>       
                </Row>
                <Row>    
                    <Button type="primary"  @click="handleStart('7')">7 </Button>   
                    <Button type="primary"  @click="handleStart('8')">8 </Button>   
                    <Button type="primary"  @click="handleStart('9')">9 </Button>   
                </Row>
                <Row>
                    <Button type="primary" @click="handleStart('4')">4</Button>             
                    <Button type="primary" @click="handleStart('5')">5</Button>             
                    <Button type="primary" @click="handleStart('6')">6</Button>
                </Row>
                <Row>
                    <Button type="primary" @click="handleStart('1')">1</Button>             
                    <Button type="primary" @click="handleStart('2')">2</Button>             
                    <Button type="primary" @click="handleStart('3')">3</Button>
                </Row>
                <Row>
                    <Button type="primary" @click="handleStart('0')" style="width:170px">0</Button>             
                    <Button type="primary" @click="handleStart('.')">.</Button>   
                </Row>
            </Col>
            <Col>
                <Row>
                    <Button type="primary" @click="handleStart('-')" >-</Button>    
                </Row>       
                <Row>
                    <Button type="primary" @click="handleStart('+')" style="height:170px">+</Button>    
                </Row>       
                <Row>
                    <Button type="primary" @click="handleStart('=')" style="height:170px">=</Button>    
                </Row>       
            </Col>
        </Row>

    </div>
</template>
<script>
import axios from 'axios'
import {initializeNewWebAudioContext} from '../../static/js/webAudioApiForDesigners.js'

var context = initializeNewWebAudioContext();                        
context.loadSound('../../static/audio/keydown.mp3', 'beep');

export default {
    data()  {
        return {
            sound_switch: true,
            vibrate_switch: true
        }
    },
    methods: {
        handleStart (keys) {     
            if(this.sound_switch){
                context.playSound('beep');
            }   
            if (this.vibrate_switch) {
                navigator.vibrate(20);
            }
            axios.post('http://192.168.31.215:5000/api/sendkeys',
                {
                keys
                }
            ).then(
                (response) => console.log(response),
                (err) => console.log(err)
            )
        }
    },
}
</script>
<style scoped >
    Button {
        width:80px;
        height:80px;
        margin: 5px;
        font-size: 3em;
    }
    h1 {
        font-size: 4em;
    }
    .control {
        margin: 20px;
    }
    .switch_label {
        font-size: 1.5em;
    }
</style>